<template>
  <section class="shop-cart side">
    <div id="head" class="f-sb-fe">
      <h2>
        <i class="el-icon-shopping-cart-2"></i>
        <span>购物车(0)</span>
      </h2>
      <div id="btn-box" class="f-fs-c">
        <el-button size="mini" :disabled="!isSelect">购买</el-button>
        <el-button size="mini" :disabled="!isSelect">删除</el-button>
        <el-checkbox v-model="allCheck" border size="mini">全选</el-checkbox>
      </div>
    </div>
    <div id="body">
      <line-cart v-for="(item, ind) in 5" :key="ind"></line-cart>
    </div>
    <div id="foot" class="f-c-c">
      <el-pagination
        small
        background
        layout="sizes, prev, pager, next"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        :curr-page="currPage"
        :pager-count="5"
        :total="total"
      ></el-pagination>
    </div>
  </section>
</template>
<script>
import LineCart from "../side/LineCart.vue";
export default {
  name: "shopCart",
  components: { LineCart },
  data() {
    return {
      allCheck: false,
      isSelect: false,
      currPage: 1,
      pageSize: 5,
      total: 104,
    };
  },
  methods: {
    sizeChange() {},
    currChange() {},
  },
};
</script>
<style lang="scss" scoped>
.el-checkbox.is-bordered.el-checkbox--mini {
  background: #fff;
}
.shop-cart {
  border-radius: $border-radius-base;
  padding: 6px 3px;
  background: $theme-color;
}
#head {
  h2 {
    font-size: 18px;
    color: $theme-color;
    padding: 0.5em 1em;
    border-radius: $border-radius-base $border-radius-base 0 0;
    background: #fff;
    i,
    span {
      font: {
        weight: bolder;
        size: 16px;
      }
    }
  }
  #btn-box {
    margin-bottom: 3px;
    .el-checkbox{
      margin-left: 10px;
    }
  }
  .el-checkbox {
    margin-right: 10px;
  }
}
#body {
  padding: 5px;
  border-radius: 0 $border-radius-base $border-radius-base $border-radius-base;
  margin-bottom: 3px;
  background: #fff;
}
#foot {
  border-radius: $border-radius-small;
  padding: 5px 0;
  background: #fff;
}
</style>